<template>
  <div class="quota-item-sm">
    <div class="quota-overview" :class="[bgColor]">
      <!-- {{ quota.quotaName }} -->
      <div class="name-time">
        <div class="quota-name">
          {{ quota.quotaName }}
          <br />
          ({{ quota.unit || '' }})
        </div>
      </div>
      <div class="value-btn">
        <div class="values">
          <div class="value">{{ quota.value }}</div>
          <!-- <div></div> -->
          <!-- <div></div> -->
          <!-- <div></div> -->
        </div>
        <!-- <SvgIcon
          icon-class="xiangqing"
          fontsize="23px"
          style="margin-right: 20px"
          :class="{ 'reverse-up-down': !!showDetail }"
          @click="handleDetailShow"
        /> -->
      </div>
      <div class="time-str">{{ timestr }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { QuotaItem } from '@/store/type'

// import SvgIcon from '@/components/SvgIcon'

import useQuotaItem from './useQuotaItem'

defineOptions({
  name: 'QuotaItem'
})

interface IProps {
  quota: QuotaItem,
  bgColor: string
}

const props = defineProps<IProps>()

const { timestr } = useQuotaItem(props.quota)
</script>

<style lang="less">
.quota-item-sm {
  .quota-overview {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 116px;
    width: 88px;
    color: #fff;
    border-radius: 3.85px;
    box-shadow: 0px 0.64px 3.21px rgba(211, 218, 228, 0.86);
    padding: 0px 6px;
    &.blue {
      // background: linear-gradient(to bottom, rgba(51, 132, 255, 0.7), rgba(5, 109, 255, 0.7));
      background: url('../../icons/blue_bag.png');
      background-size: 120% 120%;
      background-position: 20%;
    }
    &.green {
      // background: linear-gradient(to bottom, rgba(55, 185, 107, 0.7), rgba(89, 180, 122, 0.7));
      background: url('../../icons/green_bag.png');
      background-size: 120% 120%;
      background-position: 20%;
    }
    &.orange {
      // background: linear-gradient(to top, rgba(248, 117, 89, 0.7), rgba(252, 167, 122, 0.7));
      background: url('../../icons/orange_bag.png');
      background-size: 120% 120%;
      background-position: 20%;
    }

    .name-time {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      font-size: 13.54px;
      text-align: center;
      line-height: 1.2;
    }
    .time-str {
      background-color: #fff;
      border-radius: 999px;
      color: rgba(48, 180, 101, 1);
      height: 9.62px;
      line-height: 9.62px;
      // min-width: 65px;
      font-size: 6.41px;
      text-align: center;
      padding: 2px 3px;
      margin-top: 2.2px;
      font-weight: 500;
    }

    .value-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .value {
        font-size: 19.23px;
        line-height: 26.92px;
        margin-top: 1.28px;
      }
    }
  }
}
</style>
